// 主JavaScript文件

// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', function() {
    console.log('页面加载完成');
    
    // 为所有删除按钮添加确认提示
    const deleteButtons = document.querySelectorAll('.btn-danger');
    deleteButtons.forEach(button => {
        button.addEventListener('click', function(event) {
            return confirm('确定要执行此操作吗？');
        });
    });
    
    // 为表单添加一些基本验证
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        form.addEventListener('submit', function(event) {
            // 简单的表单验证逻辑
            const requiredFields = form.querySelectorAll('[required]');
            let isValid = true;
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    isValid = false;
                    field.style.borderColor = '#dc3545';
                    field.style.backgroundColor = '#f8d7da';
                } else {
                    field.style.borderColor = '';
                    field.style.backgroundColor = '';
                }
            });
            
            // 如果有密码字段，验证密码长度
            const passwordFields = form.querySelectorAll('input[type="password"]');
            passwordFields.forEach(field => {
                // 只验证非空的密码字段
                if (field.value.trim() && field.value.length < 6) {
                    isValid = false;
                    field.style.borderColor = '#dc3545';
                    alert('密码长度不能少于6个字符');
                }
            });
            
            if (!isValid) {
                event.preventDefault();
                alert('请填写所有必填字段');
            }
        });
    });
    
    // 为输入字段添加焦点和失焦事件
    const inputFields = document.querySelectorAll('input, select');
    inputFields.forEach(field => {
        field.addEventListener('focus', function() {
            this.style.borderColor = '#4a90e2';
            this.style.boxShadow = '0 0 0 2px rgba(74, 144, 226, 0.2)';
        });
        
        field.addEventListener('blur', function() {
            this.style.borderColor = '';
            this.style.boxShadow = '';
        });
    });
    
    // 实现简单的表格行悬停效果增强
    const tableRows = document.querySelectorAll('table tbody tr');
    tableRows.forEach(row => {
        row.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#f1f8ff';
            this.style.transform = 'translateY(-1px)';
            this.style.transition = 'all 0.2s ease';
        });
        
        row.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
            this.style.transform = '';
        });
    });
});

// 简单的工具函数
function showMessage(message, type = 'info') {
    // 创建消息元素
    const messageDiv = document.createElement('div');
    messageDiv.className = `message message-${type}`;
    messageDiv.textContent = message;
    
    // 添加到页面
    document.body.appendChild(messageDiv);
    
    // 设置样式
    messageDiv.style.position = 'fixed';
    messageDiv.style.top = '20px';
    messageDiv.style.right = '20px';
    messageDiv.style.padding = '15px 20px';
    messageDiv.style.borderRadius = '4px';
    messageDiv.style.color = 'white';
    messageDiv.style.fontWeight = 'bold';
    messageDiv.style.zIndex = '9999';
    messageDiv.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.2)';
    messageDiv.style.opacity = '0';
    messageDiv.style.transition = 'opacity 0.3s, transform 0.3s';
    messageDiv.style.transform = 'translateX(100%)';
    
    // 根据类型设置背景色
    if (type === 'success') {
        messageDiv.style.backgroundColor = '#28a745';
    } else if (type === 'error') {
        messageDiv.style.backgroundColor = '#dc3545';
    } else if (type === 'warning') {
        messageDiv.style.backgroundColor = '#ffc107';
        messageDiv.style.color = '#333';
    } else {
        messageDiv.style.backgroundColor = '#17a2b8';
    }
    
    // 显示消息
    setTimeout(() => {
        messageDiv.style.opacity = '1';
        messageDiv.style.transform = 'translateX(0)';
    }, 10);
    
    // 3秒后隐藏消息
    setTimeout(() => {
        messageDiv.style.opacity = '0';
        messageDiv.style.transform = 'translateX(100%)';
        // 动画结束后移除元素
        setTimeout(() => {
            document.body.removeChild(messageDiv);
        }, 300);
    }, 3000);
}